<script lang="ts" setup>
import type { PhotographerApi } from '#/api/wedding/photographer/index';
import { useVbenModal } from '@vben/common-ui';
import {
  Descriptions,
  DescriptionsItem,
  Image,
  Table,
  Tag,
  Tabs,
  TabPane,
  Rate,
  Avatar,
} from 'ant-design-vue';
import { ref } from 'vue';
import { getPhotographer, getPhotographyOrders, getPhotographerStatistics } from '#/api/wedding/photographer/index';

const photographerData = ref<PhotographerApi.Photographer>();
const photographyOrders = ref<PhotographerApi.PhotographyOrder[]>([]);
const statistics = ref({
  totalOrders: 0,
  completedOrders: 0,
  averageRating: 0,
  totalRevenue: 0,
});
const ordersLoading = ref(false);

const orderColumns = [
  { title: '订单ID', dataIndex: 'orderId', key: 'orderId', width: 180 },
  { title: '客户姓名', dataIndex: 'customerName', key: 'customerName' },
  { title: '拍摄时间', dataIndex: 'shootingTime', key: 'shootingTime', width: 180 },
  { title: '拍摄地点', dataIndex: 'shootingLocation', key: 'shootingLocation' },
  { title: '拍摄数量', dataIndex: 'photoCount', key: 'photoCount', width: 100 },
  { title: '精修数量', dataIndex: 'retouchCount', key: 'retouchCount', width: 100 },
  { title: '服务金额', dataIndex: 'serviceAmount', key: 'serviceAmount', width: 120 },
  { title: '状态', key: 'status', width: 100, slots: { customRender: 'status' } },
];

const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<PhotographerApi.Photographer>();
    if (!data?.id) {
      return;
    }

    modalApi.lock();
    try {
      photographerData.value = await getPhotographer(data.id);
      
      // 加载拍摄订单
      ordersLoading.value = true;
      photographyOrders.value = await getPhotographyOrders(photographerData.value.photographerCode);
      
      // 加载统计数据
      statistics.value = await getPhotographerStatistics(photographerData.value.photographerCode);
    } finally {
      modalApi.unlock();
      ordersLoading.value = false;
    }
  },
});
</script>

<template>
  <Modal title="摄影师详情" width="900px" :show-ok-btn="false">
    <Tabs default-active-key="1" v-if="photographerData">
      <TabPane key="1" tab="基本信息">
        <div class="flex items-start mb-6">
          <Avatar 
            v-if="photographerData.avatar" 
            :src="photographerData.avatar" 
            :size="80" 
            class="mr-4"
          />
          <Avatar v-else :size="80" class="mr-4">
            {{ photographerData.photographerName?.substring(0, 1) }}
          </Avatar>
          <div class="flex-1">
            <h3 class="text-xl font-bold mb-2">{{ photographerData.photographerName }}</h3>
            <div class="flex items-center mb-2">
              <Rate :value="photographerData.rating" disabled allow-half />
              <span class="ml-2 text-gray-500">{{ photographerData.rating }}</span>
            </div>
            <Tag>{{ photographerData.serviceLevel }}</Tag>
            <Tag class="ml-2">{{ photographerData.status }}</Tag>
          </div>
        </div>

        <Descriptions bordered :column="2">
          <DescriptionsItem label="摄影师编号">
            {{ photographerData.photographerCode }}
          </DescriptionsItem>
          <DescriptionsItem label="性别">
            {{ photographerData.gender }}
          </DescriptionsItem>
          <DescriptionsItem label="电话">
            {{ photographerData.phone }}
          </DescriptionsItem>
          <DescriptionsItem label="服务等级">
            {{ photographerData.serviceLevel }}
          </DescriptionsItem>
          <DescriptionsItem label="服务价格">
            <span class="text-red-500 font-semibold">
              ¥{{ photographerData.servicePrice }}
            </span>
          </DescriptionsItem>
          <DescriptionsItem label="从业年限">
            {{ photographerData.workYears }}年
          </DescriptionsItem>
          <DescriptionsItem label="擅长风格" :span="2">
            <Tag v-for="(style, index) in photographerData.specialtyStyles" :key="index" class="mr-1 mb-1">
              {{ style }}
            </Tag>
          </DescriptionsItem>
          <DescriptionsItem label="设备信息" :span="2">
            <Tag v-for="(eq, index) in photographerData.equipment" :key="index" class="mr-1 mb-1" color="blue">
              {{ eq }}
            </Tag>
          </DescriptionsItem>
          <DescriptionsItem label="个人简介" :span="2">
            {{ photographerData.introduction || '暂无简介' }}
          </DescriptionsItem>
        </Descriptions>

        <div class="mt-4" v-if="photographerData.portfolio && photographerData.portfolio.length > 0">
          <div class="text-sm font-medium mb-2">作品集</div>
          <Image.PreviewGroup>
            <Image
              v-for="(img, index) in photographerData.portfolio"
              :key="index"
              :src="img"
              :width="120"
              :height="120"
              class="mr-2 mb-2 object-cover rounded"
            />
          </Image.PreviewGroup>
        </div>
      </TabPane>

      <TabPane key="2" tab="服务统计">
        <div class="grid grid-cols-4 gap-4 mb-6">
          <div class="p-4 bg-blue-50 rounded text-center">
            <div class="text-2xl font-bold text-blue-600">{{ statistics.totalOrders }}</div>
            <div class="text-sm text-gray-600">总订单数</div>
          </div>
          <div class="p-4 bg-green-50 rounded text-center">
            <div class="text-2xl font-bold text-green-600">{{ statistics.completedOrders }}</div>
            <div class="text-sm text-gray-600">已完成订单</div>
          </div>
          <div class="p-4 bg-orange-50 rounded text-center">
            <div class="text-2xl font-bold text-orange-600">{{ statistics.averageRating }}</div>
            <div class="text-sm text-gray-600">平均评分</div>
          </div>
          <div class="p-4 bg-purple-50 rounded text-center">
            <div class="text-2xl font-bold text-purple-600">¥{{ statistics.totalRevenue }}</div>
            <div class="text-sm text-gray-600">总营收</div>
          </div>
        </div>
      </TabPane>

      <TabPane key="3" tab="拍摄记录">
        <Table
          :dataSource="photographyOrders"
          :columns="orderColumns"
          :loading="ordersLoading"
          :pagination="{ pageSize: 10 }"
          size="small"
        >
          <template #status="{ record }">
            <Tag>{{ record.status }}</Tag>
          </template>
        </Table>
      </TabPane>
    </Tabs>
  </Modal>
</template>

